import store from "../store/index.js"
function hasPermission(value,el=false){
	if(Array.isArray(value)){
		throw new Error(`需要配置权限，例如 v-permission="['getStatistics3,GET']"`)
	}
	const hasAuth=value.findIndex(v=>store.state.ruleNames.includes(v))!=-1
	if(el&&!hasAuth){
		el.parentNode&&el.parentNode.removeChild(el)
	}
	return hasAuth
}

export default{
	install(app){
		app.directive("permission",{
			mounted(el,binding){
				hasPermission(binding.value,el)
			}
		})
	}
}
const handleChose = (type) => {
            current.value = type;
        };

        let myChart = null;

        onMounted(() => {
            const chartDom = document.getElementById('chart');
            if (chartDom) {
                myChart = echarts.init(chartDom);
                getData();
            }
        });

        function getData() {
            const option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        showBackground: true, 
                        backgroundStyle: { 
                            color: 'rgba(180,180,180,0.2)'
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        }

        return {
            current,
            options,
            handleChose
        };
    }
};
onMounted,
@click="handleChose(item.value)"
export default {
    setup() {
		<div id="chart" style="width: 100%; height: 400px;"></div>
		class="mt-5"
		import * as echarts from 'echarts';
<template>
    <el-card shadow="never">
        <template #header>
            <div class="flex justify-between">
                <span class="text-sm">订单统计</span>
                <div>
                    <el-check-tag v-for="(item,index) in options" :key="index"
                                  :checked="current == item.value" style="margin-right: 8px;"
                                  >{{ item.text }}</el-check-tag>
                </div>
            </div>
        </template>
        
    </el-card>
</template>

<script>
import {  ref } from "vue";
        const current = ref("week")
        const options = [
            {
                text: "近一月",
                value: "month"
            },
            {
                text: "近一周",
                value: "week"
            },
            {
                text: "近24小时",
                value: "hour"
            },
        ];

        
</script>
return {
            current,
            options,
            handleChose
        };
		export default {
		    setup() {
				}
				};
